import React, { Component } from 'react';
import { Motion, spring } from 'react-motion';
import { Tabs, Select } from 'antd';
import { Collapse, Radio, Icon, Button } from 'antd';
import DataPanel from './DataPanel';
import { Scrollbars } from 'react-custom-scrollbars';
const TabPane = Tabs.TabPane;
const Panel = Collapse.Panel;

class DataControl extends Component {
  constructor(props) {
    super(props);
    this.state = {
      panelFold: true,
    };
  }

  handlePanelFolded = () => {
    this.setState({
      panelFold: !this.state.panelFold,
    });
    if(!this.state.panelFold){
      document.getElementsByClassName('esri-ui-top-left')[0].style.left='10px';
      // document.getElementById('infoDiv').style.left='25px';
      // document.getElementById('netDiv').style.left='25px';
      // document.getElementById('qxDiv').style.left='25px';
      // document.getElementById('outDiv').style.left='25px';
      document.getElementsByClassName('esri-ui-bottom-left')[0].style.left='10px';

    }
    else{
      // document.getElementsByClassName('esri-ui-top-left')[0].style.left='350px';
      // document.getElementById('infoDiv').style.left='365px';
      // document.getElementById('netDiv').style.left='365px';
      // document.getElementById('qxDiv').style.left='365px';
      // document.getElementById('outDiv').style.left='365px';
      document.getElementsByClassName('esri-ui-bottom-left')[0].style.left='350px';

    }
  };

  handleSelectData = (id, checked, parentTag, tag) => {
    const { onSelectData } = this.props;
    if (onSelectData) {
      onSelectData(id, checked, parentTag, tag);
    }
  };

  handleOpenTable = value => {
    const { onOpenTable } = this.props;
    if (onOpenTable) {
      onOpenTable(value);
    }
  };

  handleOpenChart = value => {
    const { onOpenChart } = this.props;
    if (onOpenChart) {
      onOpenChart(value);
    }
  };

  handleOpenDataInfoPanel = value => {
    const { onOpenDataInfoPanel } = this.props;
    if (onOpenDataInfoPanel) {
      onOpenDataInfoPanel(value);
    }
  };

  handleDataLevelChange = e => {
    console.log('data level change to =>', e.target.value);
    const { onDataLevelChange } = this.props;
    if (onDataLevelChange) {
      onDataLevelChange(e.target.value);
    }
  };

  render() {
    const { panelFold } = this.state;
    const { style, dataConfig, dataLevel, width, height } = this.props;
    return (
      <Motion style={{ x: spring(panelFold ? 48 : width), y: spring(panelFold ? 48 : height) }}>
        {({ x, y }) => (
          <div
            style={{
              ...style,
              display: 'flex',
              flexDirection: 'column',
              width: `${x}px`,
              height: `${y}px`,
              color: '#fff',
              backgroundColor: 'rgba(0,0,0,0.6)',
              // boxShadow:' -10px 0px 15px #034c6a inset, 0px -10px 15px #034c6a inset, 10px 0px 15px #034c6a inset,  0px 10px 15px #034c6a inset'
            }}
          >
            <div
              style={{
                lineHeight: '48px',
                height: 48,
                borderBottom: '1px Solid rgb(238,238,238,0.5)',
                textAlign: 'center',
              }}
            >
              <div style={{ float: 'left', width: 48, height: 48, fontSize: 18 }}>
                <Icon
                  type={panelFold ? 'menu-unfold' : 'menu-fold'}
                  onClick={this.handlePanelFolded}
                />
              </div>
              <span
                style={{ float: 'right', marginRight: 8, display: panelFold ? 'none' : 'block' }}
              >
                <Radio.Group
                  defaultValue={dataLevel}
                  size="small"
                  buttonStyle="solid"
                  onChange={this.handleDataLevelChange}
                >
                  <Radio.Button value="630100">地上</Radio.Button>
                  <Radio.Button value="640100">地下</Radio.Button>
                </Radio.Group>
              </span>
            </div>
            <div style={{ flex: 1, display: panelFold ? 'none' : 'block' }}>
              <Tabs
                style={{
                  height: '100%',
                  overflow: 'hidden',
                  color: '#fff',
                  backgroundColor: 'rgba(0,0,0,0)',
                }}
                tabPosition="left"
                tabBarGutter={0}
              >
                {dataConfig.map((item, index) => {
                  if (item.title !== '法人指标') {
                    return (
                      <TabPane
                        tab={
                          <span>
                            <Icon type={item.icon} />
                            {item.title}
                          </span>
                        }
                        key={index}
                      >
                        <Scrollbars style={{ height: y - 48 }}>
                          <DataPanel
                            data={item.children}
                            onSelectData={this.handleSelectData}
                            onOpenTable={this.handleOpenTable}
                            onOpenChart={this.handleOpenChart}
                            onOpenDataInfoPanel={this.handleOpenDataInfoPanel}
                          />
                        </Scrollbars>
                      </TabPane>
                    );
                  } else {
                    return (
                      <TabPane
                        tab={
                          <span>
                            <Icon type={item.icon} />
                            {item.title}
                          </span>
                        }
                        key={index}
                      >
                        <Scrollbars style={{ height: y - 48 }}>
                          <Select
                            showSearch
                            style={{ width: 180, marginLeft: 30, marginTop: 30 }}
                            placeholder="选择统计年份"
                            optionFilterProp="children"
                            filterOption={(input, option) =>
                              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                          >
                            <Option value="2018">2018年</Option>
                            <Option value="2017">2017年</Option>
                            <Option value="2016">2016年</Option>
                          </Select>

                          <Button style={{ marginLeft: 70, marginTop: 30 }} href='http://10.108.3.41/csj_assets/files/result.xlsx' type="primary" icon="download" size="default">
                            下载
                          </Button>
                        </Scrollbars>
                      </TabPane>
                    )
                  }
                })}
              </Tabs>
            </div>
          </div>
        )}
      </Motion>
    );
  }
}

export default DataControl;
